

var statusChartData=[
    {
        name:'1haoguolu',
        series:[
            {name:'1号锅炉预测',type:'line',lineStyle:'dotted',color:'#00ccfe'},
            {name:'1号锅炉历史',type:'line',lineStyle:'solid',color:'#00ccfe'}
        ]
    },
    {
        name:'2haoguolu',
        series:[
            {name:'2号锅炉预测',type:'line',lineStyle:'dotted',color:'#00ccfe'},
            {name:'2号锅炉历史',type:'line',lineStyle:'solid',color:'#00ccfe'}
        ]
    },
    {
        name:'3haoguolu',
        series:[
            {name:'3号锅炉预测',type:'line',lineStyle:'dotted',color:'#00ccfe'},
            {name:'3号锅炉历史',type:'line',lineStyle:'solid',color:'#00ccfe'}
        ]
    },
    {
        name:'4haoguolu',
        series:[
            {name:'4号锅炉预测',type:'line',lineStyle:'dotted',color:'#00ccfe'},
            {name:'4号锅炉历史',type:'line',lineStyle:'solid',color:'#00ccfe'}
        ]
    },
    {
        name:'5haoguolu',
        series:[
            {name:'5号锅炉预测',type:'line',lineStyle:'dotted',color:'#00ccfe'},
            {name:'5号锅炉历史',type:'line',lineStyle:'solid',color:'#00ccfe'}
        ]
    }

];
var AmountData=
    {
        series:[
            {name:'锅炉用气预测',type:'line',lineStyle:'dotted',color:'#00ccfe'},
            {name:'锅炉用气历史',type:'line',lineStyle:'solid',color:'#00ccfe'},
            {name:'上游产用不平衡预测',type:'line',lineStyle:'dotted',color:'#7b3cfd'},
            {name:'上游产用不平衡历史',type:'line',lineStyle:'solid',color:'#7b3cfd'}
        ]
    };
var  gasOption=[
    {
        tooltip:{
            show:true,
            formatter:function(params){
                var nameArr = [];
                var valueArr = [];
                var str = '';
                for(var i=0;i<params.length;i++){
                    nameArr[i]=params[i].seriesName;
                    valueArr[i]=Number(params[i].data).toFixed(1);

                    str+= nameArr[i]+' : '+valueArr[i]+'<br/>'
                }
                return str
            }
        },
        grid:{
            left:30,
            top:60,
            right:30,
            bottom:30
        },
        yAxis:{
            name:'X10⁴',
            axisLabel:{
                formatter:function (value, index) {
                    return Number(value)/Math.pow(10,4).toFixed(1);
                }
            }
        }
    },
    {

        tooltip:{
            show:true,
            formatter:function(params){
                var nameArr = [];
                var valueArr = [];
                var str = '';
                for(var i=0;i<params.length;i++){
                    nameArr[i]=params[i].seriesName;
                    valueArr[i]=Number(params[i].data).toFixed(1);

                    str+= nameArr[i]+' : '+valueArr[i]+'<br/>'
                }
                return str
            }
        },
        grid:{
            left:30,
            top:60,
            right:30,
            bottom:30
        },
        yAxis:{
            name:'X10⁴',
            axisLabel:{
                formatter:function (value, index) {
                    return Number(value)/Math.pow(10,4).toFixed(1);
                }
            }
        }
    },
    {
        tooltip:{
            show:true,
            formatter:function(params){
                var nameArr = [];
                var valueArr = [];
                var str = '';
                for(var i=0;i<params.length;i++){
                    nameArr[i]=params[i].seriesName;
                    valueArr[i]=Number(params[i].data).toFixed(1);

                    str+= nameArr[i]+' : '+valueArr[i]+'<br/>'
                }
                return str
            }
        },
        grid:{
            left:30,
            top:60,
            right:30,
            bottom:30
        },
        yAxis:{
            name:'X10⁴',
            axisLabel:{
                formatter:function (value, index) {
                    return Number(value)/Math.pow(10,4).toFixed(1);
                }
            }
        }
    },
    {
        tooltip:{
            show:true,
            formatter:function(params){
                var nameArr = [];
                var valueArr = [];
                var str = '';
                for(var i=0;i<params.length;i++){
                    nameArr[i]=params[i].seriesName;
                    valueArr[i]=Number(params[i].data).toFixed(1);

                    str+= nameArr[i]+' : '+valueArr[i]+'<br/>'
                }
                return str
            }
        },
        grid:{
            left:30,
            top:60,
            right:30,
            bottom:30
        },
        yAxis:{
            name:'X10⁴',
            axisLabel:{
                formatter:function (value, index) {
                    return Number(value)/Math.pow(10,4).toFixed(1);
                }
            }
        }
    },
    {
        tooltip:{
            show:true,
            formatter:function(params){
                var nameArr = [];
                var valueArr = [];
                var str = '';
                for(var i=0;i<params.length;i++){
                    nameArr[i]=params[i].seriesName;
                    valueArr[i]=Number(params[i].data).toFixed(1);

                    str+= nameArr[i]+' : '+valueArr[i]+'<br/>'
                }
                return str
            }
        },
        grid:{
            left:30,
            top:60,
            right:30,
            bottom:30
        },
        yAxis:{
            name:'X10⁴',
            axisLabel:{
                formatter:function (value, index) {
                    return Number(value)/Math.pow(10,4).toFixed(1);
                }
            }
        }
    }
];
var barChart ={
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        //data:['超上限时长', '超下限时长', '正常时长'],
        align: 'right',
        right: 10,
        itemWidth:14,
        itemHeight:14,
        textStyle:{
            color:'#b0e9fe',
            fontSize:12
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        data: ['超上限时长', '超下限时长', '正常时长'],
        axisLine:{
            lineStyle:{
                color:'#b0e9fe'
            }
        }
    }],
    yAxis: [{
        type: 'value',
        name: '时间',
        axisLine:{
            lineStyle:{
                color:'#b0e9fe'
            }
        },
        axisLabel: {
            formatter: '{value}'
        },
        splitLine:{
            show:false
        }
    }],
    series: [{
        name: '数值',
        type: 'bar',
        itemStyle:{
            normal:{
                color:'#04321e',
                borderColor: '#078d1c',
                borderWidth: 1
            }
        },
        data:[]
        // data: [20,25,35]
    }]
};
var APP = new Vue({
    el:'#app',
    data:{
        classlist:['main-item-gaolu','main-item-refenglu','main-item-zhagang','main-item-others','main-item-guolu'],
        statusChartId:['chart_'+uuid(8,64),'chart_'+uuid(8,64),'chart_'+uuid(8,64),'chart_'+uuid(8,64),'chart_'+uuid(8,64)],
        statusChart:[],
        statusObj:{},
        historyData:{},
        PressureData:{},
        msgCenter:[],//消息中心
        msgType:'all',
        srcline:'history.html',
        Amount:{},//调节总量图表
        AmountHistoryData:{},//调节总量历史数据，
        normalData:{},
        coordination:[],
        Achievements:{}

    },
    filters:{
        formatterVal:function(val){
            return val/Math.pow(10,4);
        },
        formatterVal3:function(val){
            return val/Math.pow(10,3);
        },
        keepInteger:function(val){
            return Math.floor(val);
        },
        keepOne:function(val){
            return (val).toFixed(1);
        },
        switchNormal:function(val){
            switch (val){
                case 'guolu':
                    return '锅炉预计用气总量';
                    break;
                case 'bupingheng':
                    return '上游产用不平衡量';
                    break;
            }
        },
        Percentage:function(val){
            return   (val*100).toFixed(2);
        }
    },
    mounted:function(){

        this.$nextTick(function(){
            var _this = this;
            this.getPressureData().then(function () {
                _this.initBarChart();
                _this.initLeftChart();
                _this.getCoordination();
                _this.getBarchart();
                setTimeout(function(){
                    _this.inStatusChart();
                    _this.loadStatusChartHistoryData();
                    _this.loadStatusChartRealData();
                    _this.loadAllamountChartHistory();//左侧
                    _this.loadAllamountChartRealData();
                    _this.getBarchart();
                },2000);
                setInterval(function(){
                    _this.loadStatusChartRealData();
                    _this.getPressureData();
                    _this.getMsgCenter();//消息中心
                    _this.getCoordination();
                    _this.loadAllamountChartRealData();
                },3000)
            });
        })
    },
    methods:{
        inStatusChart:function(){
            var _this = this;
            this.statusChartId.forEach(function(item,index){
                var _index = index;
                _this.statusChart[index]= new Chart(item,{
                    data:statusChartData[_index].series,
                    baseOption:gasOption[_index]
                })
            });
        },
        getSeriesName:function(progress,type){
            var seriesName='';
            if(type=='history' || type=='realPoint'){
                switch(progress){
                    case '1haoguolu':
                        seriesName='1号锅炉历史';
                        break;
                    case '2haoguolu':
                        seriesName='2号锅炉历史';
                        break;
                    case '3haoguolu':
                        seriesName='3号锅炉历史';
                        break;
                    case '4haoguolu':
                        seriesName='4号锅炉历史';
                        break;
                    case '5haoguolu':
                        seriesName='5号锅炉历史';
                        break;
                }
            }else if(type=='prediction'){
                switch(progress){
                    case '1haoguolu':
                        seriesName='1号锅炉预测';
                        break;
                    case '2haoguolu':
                        seriesName='2号锅炉预测';
                        break;
                    case '3haoguolu':
                        seriesName='3号锅炉预测';
                        break;
                    case '4haoguolu':
                        seriesName='4号锅炉预测';
                        break;
                    case '5haoguolu':
                        seriesName='5号锅炉预测';
                        break;
                }
            }

            return seriesName;
        },
        getStatusChartData:function(progress,type,index){
            var success = function (res) {
                var _this= this;
                var data = res.data;
                var seriesName =_this.getSeriesName(progress,type)
                var axis = getAxis(data);
                if(type=='prediction'){
                    if(axis.dataX.length==0) return;
                    _this.statusChart[index].loadX(axis.dataX)
                }
                if(type=='history'){
                    _this.historyData[progress+'_'+type]=data;
                }
                if(type=='baseLine'){
                    if(data.length==0) return;//调代码
                    _this.statusChart[index].loadBaseLine(seriesName,{
                        data:data
                    })
                }
                if(type=='realPoint'){
                    if(!_this.historyData[progress+'_history']) return;
                    _this.historyData[progress+'_history'].push(data);
                    _this.historyData[progress+'_history'].shift();
                    var axisreal = getAxis(_this.historyData[progress+'_history']);
                    //_this.statusChart[index].loadX(axisreal.dataX);
                    _this.statusChart[index].loadData(seriesName,axisreal.dataY)
                }else{
                    _this.statusChart[index].loadData(seriesName,axis.dataY)
                }
            };
            var error = function(e){
                console.log('加载'+type+'图表出错了')
            };
            this.$http.get(URL+'/guolu/'+(index+1)+'/gas/'+type).then(success,error);
        },
        loadStatusChartHistoryData:function(){
            for(var i=0;i<statusChartData.length;i++){
                var name=statusChartData[i].name;
                this.getStatusChartData(name,'history',i);
                this.getStatusChartData(name,'baseLine',i);
            }
        },
        loadStatusChartRealData:function(){
            for(var i=0;i<statusChartData.length;i++){
                var name=statusChartData[i].name;
                this.getStatusChartData(name,'prediction',i);
                this.getStatusChartData(name,'realPoint',i);
            }
        },
        getPressureData:function(){
            var _this = this;
            var success = function(res){
                _this.PressureData=res.data;
            };
            var error = function(e){
                console.log('加载压力出错')
            }
            return this.$http.get(URL+'/guolu/status').then(success,error)
        },
        getMsgCenter:function(){
            /*消息中心*/
            var _this=this;
            bus.$on('msgType',function(val){
                _this.msgType=val;
            });
            var success=function(res){
                _this.msgCenter=res.data;
            };
            var error=function(e){
                console.log('高炉消息中心出错了');
            };
            switch(this.msgType){
                case 'mine'://高炉页面没有与我相关按钮
                    //this.$http('../data/gaolu-msg.json').then(success,error);
                    break;
                case 'all':
                    this.$http(URL+'/message/current').then(success,error);
                    break;
            }
        },
        initLeftChart:function(){
          var _this = this;
           this.Amount = new Chart('fluctuation_chart',{
                data:AmountData.series,
               baseOption:gasOption[0],
          })
        },
        getLeftSeriesName:function(progress,type){
            var seriesName='';
            if(type=='history' || type=='realPoint'){
                switch(progress){
                    case 'bupengheng':
                        seriesName='上游产用不平衡历史';
                        break;
                    case 'guolu':
                        seriesName='锅炉用气历史';
                        break;
                }
            }else if(type=='prediction'){
                switch(progress){
                    case 'bupingheng':
                        seriesName='上游产用不平衡预测';
                        break;
                    case 'guolu':
                        seriesName='锅炉用气预测';
                        break;
                }
            }

            return seriesName;
        },
        getAllamountChartData:function(progress,type){
          var success = function(res){
              var _this= this;
              var data = res.data;
              var axis = getAxis(data);
             var seriesname= this.getLeftSeriesName(progress,type);
              if(type=='prediction'){
                  if(progress=='guolu'){
                      _this.Amount.loadX(axis.dataX)//以调节预测为X轴
                      _this.Amount.loadData('锅炉用气预测',axis.dataY);
                      _this.normalData[progress]=axis.dataY[axis.dataY.length-1];
                  }else{
                      _this.Amount.loadData('上游产用不平衡预测',axis.dataY);
                  }
              }
              if(type=='history'){
                  if(progress=='guolu'){
                      _this.AmountHistoryData.guolu=data;
                  }else{
                      _this.AmountHistoryData.bupingheng=data;
                  }
                  //_this.Amount.loadX(axis.dataX);
                  //_this.Amount.loadData('锅炉用气历史',axis.dataY);

              };
              if(type=='realPoint'){
                  if(progress=='guolu'&&_this.AmountHistoryData.hasOwnProperty("guolu")){
                      _this.AmountHistoryData[progress].shift();
                   _this.AmountHistoryData[progress].push(data);
                    var axisreal = getAxis(_this.AmountHistoryData[progress]);
                      this.Amount.loadData('锅炉用气历史',axisreal.dataY);
                  }else if(_this.AmountHistoryData.hasOwnProperty("bupingheng")){
                      _this.AmountHistoryData[progress].shift();
                   _this.AmountHistoryData[progress].push(data);
                   var axisreal = getAxis(_this.AmountHistoryData[progress]);
                      this.Amount.loadData('上游产用不平衡历史',axisreal.dataY);
                      _this.normalData[progress]=data[1];
                  }
              };
          }
          var error = function(e){
              console.log(e)
            }
          if(progress=='guolu'){
              this.$http.get(URL+'/quanwang/'+progress+'/'+type).then(success,error)
          }else{
              this.$http.get(URL+'/guolu/'+progress+'/'+type).then(success,error)
          }
        },
        loadAllamountChartHistory:function(){
            this.getAllamountChartData('guolu','history');
            this.getAllamountChartData('bupingheng','history');
        },
        loadAllamountChartRealData:function(){
            this.getAllamountChartData('guolu','prediction');
            this.getAllamountChartData('bupingheng','prediction');
            this.getAllamountChartData('guolu','realPoint');
            this.getAllamountChartData('bupingheng','realPoint');
        },
        initBarChart:function(){
            this.pressBar = new Bar('press_bar',{
                data:'',
                baseOption:barChart
            })
        },
        getCoordination:function(){
            /*锅炉状态*/
            var success=function(res){
                var _this=this;
                this.coordination=res.data;

            };
            var error=function(e){
                console.log('加载锅炉状态出错')

            };
            this.$http.get(URL+'/guolu/xietong').then(success,error)
        },
        getBarchart:function(){
            /*左侧绩效柱状图*/
            var _this = this;

            var success = function(res){
                _this.Achievements = res.data;
                _this.pressBar.loadData('数值',_this.Achievements.value)
            };
            var error = function(e){
                console.log('加载绩效图报错')
            };
            //this.$http.get('http://192.168.100.179:8082/guolu/3/performance').then(success,error);
            this.$http.get(URL+'/guolu/3/performance').then(success,error);
        }
    }
});
